<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width initial-scale=1">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/a5734b29083/integration/jqueryui/dataTables.jqueryui.js"></script>
<script src="bootstrap-datepicker.js"></script>
<script src="bootstrap-confirmation.js"></script>
<script src="bootstrap-tooltip.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"></link>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"></link>
<link rel="stylesheet" href="http:////cdn.datatables.net/plug-ins/a5734b29083/integration/jqueryui/dataTables.jqueryui.css"></link>
<link rel="stylesheet" href="datepicker.css"></link>
<link rel="stylesheet" href="bootstrap-justified-nav.css"></link>
</head>
<body background="background.jpg">
<script>
	$(document).ready(function() {
	
	     $('.ops-search').html("Search <span class='glyphicon glyphicon-search'></span>");
		 $('#example').dataTable( {
		    "bLengthChange": false,
			"bPaginate": false,
		"scrollX":true,
		"lengthMenu" : [ [ 5, 10, 20, 50, -1 ], [ 5, 10, 20, 50, "All" ] ]

	}).rowGrouping({bExpandableGrouping: true});
	  $('.dobformat').datepicker();
	});
	
		function test() {	
		         alert("hi");
				 $("#test").confirmation('show');				
				}
	
	$(function() {
	$('.dobformat').datepicker(
			{
				autoclose : true,
				format : "dd/mm/yyyy",
			});
});
</script>
<style>
table {
	font-size: 90%;
}
.modal-header{
   color:CYAN;
}
</style>

	<div class="container">
		<div class="panel panel-default">
			<div class="panel-content">
				<label class="panel-heading pull-right text-info nav nav-tabs"
					data-toggle="dropdown"><Small>Ashutosh Sahu</small> || <small>
						Admin</small></label>
				<ul class="nav nav-tabs" role="tablist">
					<li class="active"><a href="#"><p
								class="glyphicon glyphicon-home text-primary">Home</p></a></li>
					<li class="active"><a href="#"><p
								class="glyphicon glyphicon-home text-primary">Information</p></a></li>
					<li class="active"><a href="#"><p
								class="glyphicon glyphicon-home text-primary">PayChecks</p></a></li>
					
				</ul>
			</div>
			<div class="panel panel-success">
    <div class="panel-heading">No title tag</div>
    <div class="panel-body">Panel content</div>
</div>
			<div class="panel panel-info">
				<p>Create a responsive table (will scroll horizontally on small
					devices under 768px). In addition: add alternating cell background
					color:</p>
				<div class="col-md-4 form-group">
					<div class="input-group ">
						<span class="input-group-addon">First Name</span> <input
							type="text" class="form-control" id="userName"
							placeholder="Enter FirstName" />
					</div>
				</div>
				<div class="col-md-4 form-group">
					<div class="input-group ">
						<span class="input-group-addon">Last Name</span>
						<select class="form-control">
								  <option draggable="true">1</option>
								  <option>2</option>
								  <option>3</option>
								  <option>4</option>
								  <option>5</option>
						</select>
					</div>
				</div>
				<div class="col-md-4 form-group">
						<div class="input-group date">
							<span class="input-group-addon">Active From</span>
							<input type="text" class="form-control dobformat"
								id="activeFrom" />
							<span class="input-group-addon"><i
								class="glyphicon glyphicon-calendar"></i></span>
						</div>
					</div>
					<center>
					<button type="button" value="Search" class="btn btn-info ops-search" partialSubmit="true"></button>		
					&nbsp;
					<button type="reset" class="btn btn-default" partialSubmit="false">Reset</button>
					&nbsp;
					<a href="javascript:test();" id="test">Testing POPUP</a>
					&nbsp;
					<button type="button" class="btn btn-success"  data-toggle="modal" data-target=".bs-example-modal-sm">Add <span class="glyphicon glyphicon-plus"/></button>
					</center>
					<br/>
						<div style="width: 100%;">
							<table id="example" class="display"
								cellspacing="0" width="100%">
								<thead>
									<tr>
									    <th></th>
										<th>Office</th>
										<th>Age</th>
										<th>Start date</th>
									</tr>
								</thead>
								<tbody>
									<tr>
									    <td> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">A</a></td>
										<td>Tiger Nixon</td>
										<td>System Architect</td>
										<td>Edinburgh</td>
									</tr>	
									
									
									
								</tbody>
							</table>
						</div>
			</div>
			<div class="panel-footer">
				<p class="text-right">Copyright : Ashutosh Sahu</p>
			</div>
		</div>


	</div>
		<div class="modal fade bs-example-modal-sm" data-backdrop="static"
		data-keyboard="false" tabindex="-1" role="dialog"
		aria-labelledby="mySmallModalLabel" aria-hidden="true"
		id="loginParent">
		<div class="modal-header" id="loadingimg" style="display: none">
			<center>
				<img src="include/images/loading.gif" id="loading-indicator"
					style="display: block;" /> <span style="color: white;">Please
					do not refresh</span>
			</center>
		</div>
		<div class="modal-dialog modal-md" id="paramModal">
		<div class="modal-header">
		</div>
			<div class="modal-header">
			<div class="row clearfix">
		
		<div class="col-xs-12 col-sm-12 col-md-10 col-lg-10  column col-sm-offset-0 col-md-offset-1 col-lg-offset-1">

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>
						<button type="button" class="close" data-dismiss="modal"
							aria-hidden="true">&times;</button>
						<h4 class="modal-title" id="myModalLabel">
							Parameter&nbsp;<small>Details</small>
						</h4>

					</legend>
<!-- Select Basic -->
<div class="form-group">
  <label class="col-md-3 control-label" for="selectbasic">Select Basic</label>
  <div class="col-md-9">
    <select id="selectbasic" name="selectbasic" class="form-control">
      <option value="1">Option one</option>
      <option value="2">Option two</option>
      <option value="3">Option three</option>
    </select>
  </div>
</div>


<!-- Text input-->
<div class="form-group">
  <label class="col-md-3 control-label" for="textinput">Text Input</label>  
  <div class="col-md-3">
  	<input id="textinput" name="textinput" placeholder="placeholder" class="form-control input-md" type="text">
  </div>


<!-- Multiple Radios (inline) -->

  <label class="col-md-3 control-label" for="radios">Inline Radios</label>
  <div class="col-md-3"> 
    <label class="radio-inline" for="radios-0">
      <input name="radios" id="radios-0" value="1" checked="checked" type="radio">
      Yes
    </label> 
    <label class="radio-inline" for="radios-1">
      <input name="radios" id="radios-1" value="2" type="radio">
      No
    </label> 
  </div>
</div>
<div class="form-group">
  <label class="col-md-3 control-label" for="textinput">Text Input</label>  
  <div class="col-md-3">
  	<input id="textinput" name="textinput" placeholder="placeholder" class="form-control input-md" type="text">
  </div>
  <label class="col-md-3 control-label" for="textinput">Text Input</label>  
  <div class="col-md-3">
  	<input id="textinput" name="textinput" placeholder="placeholder" class="form-control input-md" type="text">
  </div>
 </div>
  
  <!-- Textarea -->
<div class="form-group">
  <label class="col-md-3 control-label" for="textarea">Text Area</label>
  <div class="col-md-9">                     
    <textarea class="form-control" id="textarea" name="textarea">default text</textarea>
  </div>
</div>

<!-- Button (Double) -->
<center>
<div class="form-group">
  <label class="col-md-3 control-label" for="button1id"></label>
  <div class="col-md-8">
    <button id="button1id" name="button1id" class="btn btn-success">Ok</button>
    <button id="button2id" name="button2id" class="btn btn-danger">Cancel</button>
  </div>
</div>
</center>
</fieldset>
</form>
		</div>
		
	</div>
			</div>
		</div>
	</div>
	<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>-->
	
</body>

</html>
